<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>折线图</title>
		<script src="../lib/echarts.min.js"></script>
	</head>
	<body>
		<div style="width: 600px; height: 500px"></div>
		<script>
			var mCharts = echarts.init(document.querySelector('div'))
			var xDataArry = [
				'1月',
				'2月',
				'3月',
				'4月',
				'5月',
				'6月',
				'7月',
				'8月',
				'9月',
				'10月',
				'11月',
				'12月',
			]
			var yDataArry = [
				15000, 23000, 22400, 21800, 13500, 14700, 26000, 23555, 22210, 22222,
				12300, 12303,
			]
            var yDataArry2 = [
				15002, 23019, 22425, 21835, 13511, 14600, 25400, 23000, 12500, 23000,
				12301, 12306,
			]
			var option = {
				title: {
					text: '销量排名',
				},
				xAxis: {
					type: 'category',
					data: xDataArry,
                    // 紧挨Y轴之上
                    boundaryGap:false
				},
				yAxis: {
					type: 'value',
                    // Y轴自动缩放，脱离 0 值比例
                    scale:true
				},
				series: [
					{
						name: '康师傅',
						data: yDataArry,
						type: 'line',
						markPoint: {
							data: [
								{ type: 'max', name: '最大值' },
								{ type: 'min', name: '最小值' },
							],
						},
						markLine: {
							data: [{ type: 'average' }],
						},
                        // 标注区间
						markArea: {
							data: [
								[{ xAxis: '2月' }, { xAxis: '3月' }],
								[{ xAxis: '7月' }, { xAxis: '8月' }],
							],
						},
                        // 平滑的线条
                        smooth:true,
                        // 线条控制
                        lineStyle:{
                            color:'green',
                            type:'solid' //dashed 虚线;dotted 点状线
                        },
                        // 面积填充
                        areaStyle:{
                            color:'pink'
                        },
                        stack:'all',
                    },
                    {
                        type:'line',
                        data:yDataArry2,
                        // 堆叠图
                        stack:'all',
                        areaStyle:{}
                    }
				],
			}
			mCharts.setOption(option)
		</script>
	</body>
</html>
